<template>
  <div>
    <!-- 遮罩层背景 -->
    <div class="mask" v-if="isShowOverlay" @click="clickOverlay()"></div>
    <!-- 隐藏支付弹框内容 -->
    <div class="content" v-if="isShowPayType">
      <div class="lines"></div>
      <div class="discontent clearfix">
        <div>当前隐藏名单为：<span class="contS">{{userDetail.name}}</span></div>
        <div>当前隐藏类型为：<span class="contS">{{userDetail.lost_type}}</span></div>
      </div>

      <!-- 隐藏期限 -->
      <div class="yincang clearfix">
        <h4 id="chose">隐藏期限</h4>
        <!-- 套餐分类 -->
        <ul class="forever">
          <li class="active list">
            <div class="one">永久</div>
            <div class="price">
              <span class="danjia">￥</span><span class="money" style="font-size: 0.25rem">{{userDetail.money}}</span>
            </div>
            <!-- 选中套餐时显示 -->
            <img class="select" src="static/icon_pc/icon/icon_select.png" alt="">
          </li>
        </ul>
      </div>

      <!-- 支付方式 -->
      <div class="paystyle2 clearfix">
        <h4 id="paystyle">支付方式</h4>
        <ul class="count">
          <li @click="choicePayType('balance')">
            <!-- 余额支付 -->
            <img class="img1"
                 :src="payType=='balance'?'static/icon_pc/icon/pay_select_1_big.png':'static/icon_pc/icon/pay_default_1_big.png'"
                 alt="">
          </li>
          <li @click="choicePayType('wx')">
            <!-- 微信支付 -->
            <img class="img1"
                 :src="payType=='wx'?'static/icon_pc/icon/pay_select_3_big.png':'static/icon_pc/icon/pay_default_3_big.png'"
                 alt="">
          </li>
        </ul>
        <div class="spanyebz"
             v-show="payType=='balance' && parseFloat(userAccount.wallet)<parseFloat(userDetail.money)">余额不足
        </div>
      </div>

      <!-- 合计 -->
      <div class="total">
        <div class="tol">
          <span class="all">合计：<span class="peo">￥{{userDetail.money}}</span></span>
        </div>
        <span id="btn" @click="paySure()">立即隐藏</span>
      </div>
    </div>

    <!-- 余额支付窗口 -->
    <div class="paybox" v-show="isShowBalancePayment">
      <div class="paytop">
        <img class="colse" src="static/icon_pc/icon/close (2).png" alt="" @click="closeBalancePayment()">
        <span class="paied">支付</span>
        <span class="makepsd"><router-link to="/editepaypwd">设置支付密码</router-link></span>
      </div>
      <div class="money">￥{{userDetail.money}}
      </div>
      <div class="paypsd">
        <input type="password" maxlength="6" v-model="pay_pwd" placeholder="请输入您的支付密码">
      </div>
      <button class="paybtn" @click="balancePaymentSure">确认支付</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: "userDetail-pay",
    data() {
      return {
        payType: 'balance',   //选中的支付方式
        insufficientBalance: false,
        isShowOverlay: false,
        isShowBalancePayment: false,
        userAccount: {
          wallet: 0,
        },
        wxPayData: {},
        pay_pwd: '', //支付密码
      }
    },
    props: {
      isShowPayType: {},
      userDetail: {}
    },
    watch: {
      isShowPayType() {
        this.isShowOverlay = this.isShowPayType;
      },
    },
    created() {
      this.getUserAccountInfo();
    },
    methods: {
      closeBalancePayment() {  //
        this.isShowBalancePayment = false;
        this.isShowOverlay = false;
      },
      getUserAccountInfo() {//获取账户余额和查询次数
        this.$http.get('api/Welcome/user').then(response => {
          console.log('获取账户余额和查询次数');
          console.log(response)
          this.userAccount = response.data;
        }).catch(error => {

        });
      },
      balancePaymentSure() {   //确认余额支付
        var that = this;
        $.ajax({
          type: "post",
          url: "http://zcapi.hrgsxt.cn/api/Hide/index",
          data: {
            token: localStorage.token,
            money: that.userDetail.money,
            pay_style: '3',
            lost_id: that.userDetail.lost_id,
            pay_pwd: that.pay_pwd
          },
          cache: false,
          dataType: "json",
          success: function (response) {
            if (response.code == 200) {
              that.$toast({
                message: response.message,
                duration: 1000
              });
              if (that.$store.state.userType == 1) {
                that.$router.push({
                  path: './personalcenter'
                });
              } else if (that.usertype == 2) {
                that.$router.push({
                  path: './corporatecenter'

                });
              }
            } else if (response.code == 400) {
              that.$toast({
                message: response.message,
                duration: 1000
              })
            }
            that.isShowOverlay = false;
            that.isShowBalancePayment = false;
          }
        });
      },
      choicePayType(type) {  //选择支付类型
        this.payType = type;
      },
      paySure() {  //立即购买
        this.$http.get('api/User_safe/index').then(response => {
          if (response.data.pay_pwd == '未设置') {
            this.$toast({
              message: '请先设置支付密码'
            });
            this.$router.push({
              path: "./editepaypwd",
              query: {
                paypwd: response.data.pay_pwd,
              }
            });
          } else {
            if (this.payType === 'balance') {
              if (parseFloat(this.userAccount.wallet) < parseFloat(this.userDetail.money)) {
                console.log('余额不够');
                this.$toast({
                  message: '余额不足，请选择其他方式支付'
                });
              } else {
                this.$emit('hidePay');
                this.isShowBalancePayment = true;
                setTimeout(() => {
                  this.isShowOverlay = true;
                }, 300)
              }
            } else { //如果tab为wx 则为微信支付方式
              console.log('微信支付');
              console.log(this.userDetail)
              this.$emit('hidePay');

              let params = {
                money: this.userDetail.money,
                pay_style: '1',
                lost_id: this.userDetail.lost_id,
                pay_pwd: '',
                token: localStorage.token,
              };

              console.log('>>>>');
              console.log(params);
              $.ajax({
                type: 'post',
                url: 'http://zcapi.hrgsxt.cn/api/Hide/index',
                data: params,
                dataType: 'json',
                cache: false,
                success: response => {
                  if (response.code === 200) {
                    this.wxPayData = response.data;
                    if (typeof WeixinJSBridge == "undefined") {
                      if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                      } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                      }
                    } else {
                      this.onBridgeReady();
                    }

                  }
                  this.isShowOverlay = false;
                }
              })

            }
          }
        }).catch(error => {

        });
      },
      onBridgeReady() { //微信支付
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": this.wxPayData.appId, //公众号名称，由商户传入
            "timeStamp": this.wxPayData.timeStamp, //时间戳，自1970年以来的秒数
            "nonceStr": this.wxPayData.nonceStr, //随机串
            "package": this.wxPayData.package,
            "signType": this.wxPayData.signType, //微信签名方式：
            "paySign": this.wxPayData.paySign //微信签名
          },
          (res) => {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              if (this.$store.state.userType == 1) {
                this.$router.push({
                  path: './Personalcenter'
                });
              } else {
                this.$router.push({
                  path: './corporatecenter'
                });
              }
            } else {
              this.$toast("微信支付失败");
            }
          });

      },
      clickOverlay() {
        this.$emit('hidePay');
        this.isShowOverlay = false;
        this.isShowBalancePayment = false;
      }

    }
  }
</script>

<style scoped>

</style>
